<template>
  <div>
    <gs-header :title="pageTitle"/>
    <div class="page-vertical-slide-wrapper">
      <div class="slide-content">
        <slide
          ref="slide"
          :autoPlay="isAutoPlay"
          :loop="isLoop"
          :showDot="isShowDot"
          :interval="interval"
          :speed="speed"
          :threshold="threshold"
        >
          <div v-for="(item,index) in items" :key="index" class="slide-item">
            <a href="#">
              <img :src="item">
            </a>
          </div>
        </slide>
      </div>
    </div>
  </div>
</template>

<script>
import Slide from 'example/components/slide/vertical-slide'
import GsHeader from 'example/components/gs-header/gs-header'

export default {
  name: 'PageVerticalSlide',
  computed: {},
  data () {
    return {
      pageTitle: '垂直轮播',
      isAutoPlay: true,
      isLoop: true,
      isShowDot: true,
      interval: 3000,
      speed: 400,
      threshold: 50,
      items: [
        require('../common/image/spring.jpeg'),
        require('../common/image/summer.jpeg'),
        require('../common/image/fall.jpeg'),
        require('../common/image/winter.jpeg')
      ]
    }
  },
  components: {
    Slide,
    GsHeader
  },
  mounted () {
    this.$refs.slide.init()
  }
}
</script>

<style lang="scss">
.page-vertical-slide-wrapper {
  position: relative;
  width: 100%;
  .slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
